<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
%>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>订货郎注册</title>
    <%@include file="style.jsp" %>
    <%@include file="script.jsp" %>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/orderlang/customer/css/register.css"/>
</head>
<body onselectstart="return false">
    <header>
        <ul class="clearfix">
            <li><img src="${pageContext.request.contextPath}/static/orderlang/customer/img/logo.png"/></li>
        </ul>
    </header>
    <div id="main">
        <div class="center">
            <h4><p class="error-mpt"></p></h4>
            <ul class="vali ">
               <li class="phone"><input type="text" maxlength="11" name="phone" placeholder="手机号"/></li>
               <li class="get"><input type="text" name="Number" placeholder="验证码"/><button id="getNumber">获取验证码</button></li>
               <li class="isAgree"><i class="hide"></i><a href="#">我已同意服务条款，以及隐私政策</a></li>
               <li class="next"><button id="next">下一步</button></li>
               <li class="toLogin"><a href="${pageContext.request.contextPath}/register/toLogin">已有账号，去登录</a></li>
            </ul>
            <ul class="msg hide">
                <li class="company"><input type="text" name="cpName" placeholder="请输入公司名称"/></li>
                <li class="company">
                    <input type="text" name="cpAcount" placeholder="请设置公司账号，建议使用公司字母简称"/>
                    <p>设置后，所有员工将通过此公司账号登录</p>
                </li>
                <li class="company"><input type="password" name="password" placeholder="6-18位，且必须含有字母和数字"/></li>
                <li class="done"><button id="complete">完成</button></li>
                <li class="toLogin"><a href="${pageContext.request.contextPath}/register/toLogin">已有账号，去登录</a></li>
            </ul>
        </div>
    </div>
    <footer>
        <p>Copyright © 2017 dico.com</p>
    </footer>
    <div id="mask" style="z-index: 5" class="hide">
    <div class="alert" style="z-index: 10">
        <p></p>
        <div></div>
    </div>
</div>
    <script>
        $("#main").on("click",".vali .isAgree",function(e){
            e.preventDefault();
            e.stopPropagation();
            $(this).children('i').toggleClass("hide");
            isAgree();
        });
        function isAgree(){
        	if($('.isAgree i').hasClass('hide')){
        		$('#next').attr('disabled',true).css('background','#FAB98D');
        	}else{
        		$('#next').attr('disabled',false).css('background','#FF7D22');
        	}
        };
        isAgree();
        //发送验证码倒计时
        $("#getNumber").click(function(){
            $(this).css("background-color","#FF7D22");
            $(this).attr("disabled",true);
            var s=60;
            var timer=setInterval(function(){
                s--;
                $(this).html(s+"秒重新发送");
                if(s==0){
                    clearInterval(timer);
                    $(this).html("获取验证码");
                    $(this).css("background-color","#FAB98D");
                    $(this).attr("disabled",false);
                }
            }.bind(this),1000);
            var mobile=$('.phone').find('input').val();
             $.ajax({
        		type:"GET",
        		url:path+"/register/sendMessage",
        		data:{"mobile": mobile
        				},
        		success:function(data){
        			if(data.isSuccess==0){
        				$('.error-mpt').css('visibility','visible').html('验证码发送失败');
        			}else{
        				$('.next').attr('data-value',data.data);
        			}
        	}
        	}); 
        });
        function trim(s){
            return s.replace(/(^\s*)|(\s*$)/g, "");
        };
      	$('.vali').on('blur','.phone input',function(){
            if(!(/^1[34578]\d{9}$/.test($(this).val()))){
                $('.error-mpt').css('visibility','visible').html('请输入正确的手机号码');
            }else{
            	$('.error-mpt').css('visibility','hidden');
            }
      	});
     	$('.vali').on('blur','.get input',function(){
            if($(this).val()==""){
                $('.error-mpt').css('visibility','visible').html('请输入验证码');
            }else{
            	$('.error-mpt').html("");
            }
      	});
        //下一步
        $("#next").click(function(){
        		if($('.error-mpt').html()==""){
        			var code =5;
	            	var codeNum =5;
	            	if(codeNum==code){
	            		$('.msg').attr('data-id',$('.phone').find('input').val());
	            		$(this).parent().parent("ul.vali").addClass("hide").next("ul.msg").removeClass("hide");
	            	}else{
	            		$('.error-mpt').css('visibility','visible').html('验证码输入错误');
	            	}
        		}else{
        			 $('.error-mpt').css('visibility','visible').html('请输入信息');	
        		}
            	
        })
      //完成
      $('#complete').click(function(){
    	var path = getRootPath();
    	var phone = $('.msg').attr('data-id');
    	var customerName =$('.company:nth-child(1)').find('input').val();
    	var systemName =$('.company:nth-child(2)').find('input').val();
    	var password =$('.company:nth-child(3)').find('input').val();
    	   
    	 $.ajax({
			type:"GET",
			url:path+"/register/registerCustomer",
			data:{"mobile":phone,
					"customerName":customerName,
					"systemName":systemName,
					"password":password
					},
			success:function(data){
					if(data.isSuccess==1){
						console.log('成功');
						$('#mask').children('div').children('div').html(data.data);
						$("#mask").removeClass("hide");
						window.setTimeout("tiaozhuan()",1000); 
					}else{
						console.log('失败');
						 $('#mask').children('div').children('div').html(data.msg);
						$("#mask").removeClass("hide");
						window.setTimeout("fail()",1000); 
					}
			}
		});  
    	 
    	 
    	 
    	 
    	
      })
      
    function tiaozhuan(){
        var path = getRootPath();
   		window.location.href=path+"/register/toLogin";
   	}
    function fail(){
    	  var path = getRootPath();
   		window.location.href=path+"/register/toRegister";
   	}
        
    $("#next_1").click(function(){
        $(this).parent().parent("ul.second").addClass("hide").next("ul.msg").removeClass("hide");
    })
    
    function getRootPath(){
	    var pathName=window.document.location.pathname;
	    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
	    return projectName;
	}
    </script>
</body>
</html>